import React, { Component, Fragment } from 'react';

import {
  Card,
  Row,
  Col,
  Descriptions,
  Divider,
  Badge,
} from 'antd';
import styles from './SalesContract.less';
import '@ant-design/compatible/assets/index.css';

const { Item } = Descriptions;

interface SalesContractProps {
  detailInfos: Object;
}

interface SalesContractSState {
  franchiseeContractDetail: Object;
}

class SalesContract extends Component<SalesContractProps, SalesContractSState> {
  state: SalesContractSState = {
    franchiseeContractDetail: {},
  }

  static getDerivedStateFromProps(nextProps: SalesContractProps, preState: SalesContractSState) {
    const { detailInfos } = nextProps;
    const { franchiseeContractDetail } = preState;

    if (detailInfos !== franchiseeContractDetail) {
      return {
        franchiseeContractDetail: detailInfos,
      };
    }

    return null;
  }

  renderBasicInfoElem = (detail: any) => (
    <Card
      title="基本信息"
      bordered={false}
      className="paddingB10"
    >
      <Descriptions bordered size="small">
        <Item label="合同类型">销售合同</Item>
        <Item label="合同主体">{detail.party_a_name}</Item>
        <Item label="合同编号">{detail.contract_num}</Item>
      </Descriptions>
    </Card>
  )

  renderSalesDetailElem = (detail: any) => {
    const { detail_list } = detail;

    return (
      <Card
        title="销售明细"
        bordered={false}
        className="paddingB10"
      >
        <Row gutter={24}>
          {
            detail_list && detail_list.map((item: any, index: number) => (
              <Col
                md={24}
                sm={24}
                key={item.id}
                className={styles.overflowX}
              >
                <div
                  style={{
                    display: 'flex',
                    marginBottom: index === detail_list.length - 1 ? 0 : 20,
                  }}
                >
                  <div className={styles.alignItems}>
                    <Badge count={1} className={styles.backgroundColor} />
                  </div>

                  <div className="tableListForm dottedBox" style={{ flex: 1 }}>
                    <Descriptions column={3}>
                      <Item label="品牌">{item.brand}</Item>
                      <Item label="货物名称">{item.cargo}</Item>
                      <Item label="型号">{item.version}</Item>
                      <Item label="格口数量（个）">{item.detail_count}</Item>
                      <Item label="柜体数量（台）">{item.count}</Item>
                      <Item label="单价（元）">{(item.unit_price / 100).toFixed(2)}</Item>
                      <Item label="小计（元）">{(item.total_price / 100).toFixed(2)}</Item>
                    </Descriptions>
                  </div>
                </div>
              </Col>
            ))
          }
        </Row>
      </Card>
    );
  }

  renderPaymentInfoElem = (detail: any) => {
    const {
      advance_percent, total_amount, deliver_percent, final_percent,
    } = detail;

    return (
      <Card title="付款信息" bordered={false}>
        <div className={styles.lineHeight}>
          <span>预付款：</span>
          {advance_percent} %
          <Divider type="vertical" />
          {advance_percent * total_amount / 10000} 元
        </div>

        <div className={styles.lineHeight}>
          <span>发货款：</span>
          {deliver_percent} %
          <Divider type="vertical" />
          {deliver_percent * total_amount / 10000} 元
        </div>

        <div className={styles.lineHeight}>
          {/* eslint-disable-next-line no-irregular-whitespace */}
          <span>　尾款：</span>
          {final_percent} %
          <Divider type="vertical" />
          {final_percent * total_amount / 10000} 元
        </div>
      </Card>
    );
  }

  render() {
    const { franchiseeContractDetail } = this.state;

    return (
      <Fragment>
        {this.renderBasicInfoElem(franchiseeContractDetail)}
        {this.renderSalesDetailElem(franchiseeContractDetail)}
        {this.renderPaymentInfoElem(franchiseeContractDetail)}
      </Fragment>
    );
  }
}

export default SalesContract;
